<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="../layui/css/layui.css">

    <link rel="stylesheet" href="static/css/jquery-ui-1.10.3.custom.min.css">
    <link rel="stylesheet" href="static/css/entypo.css">
    <link rel="stylesheet" href="static/css/css.css">
    <link rel="stylesheet" href="static/css/bootstrap.css">
    <link rel="stylesheet" href="static/css/neon-core.css">
    <link rel="stylesheet" href="static/css/neon-theme.css">
    <link rel="stylesheet" href="static/css/neon-forms.css">
    <link rel="stylesheet" href="static/css/custom.css">


    <script src="static/js/jquery-1.11.0.min.js"></script>

    <!--[if lt IE 9]>
    <script src="assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->



</head>
<body>


<ol class="breadcrumb bc-3">
    <li>
        <a href="index.html"><i class="entypo-home"></i>首页</a>
    </li>
    <li>
        <a href="javascript:;">地区管理</a>
    </li>
    <li class="active">

        <strong>新增地区</strong>
    </li>
</ol>

<!--<h3>-->
    <!--&lt;!&ndash;<span class="label label-warning">New in 1.1.3</span>&ndash;&gt;-->
    <!--地区列表-->
    <!--&lt;!&ndash;<small>Try to resize the window to mobile width</small>&ndash;&gt;-->
<!--</h3>-->
<!--<br>-->

<div class="row" id="app">
    <div class="col-md-12">

        <div class="panel panel-primary" data-collapsed="0">

            <div class="panel-heading">
                <div class="panel-title">
                    新增地区
                </div>

                <div class="panel-options">
                    <a href="#sample-modal" data-toggle="modal" data-target="#sample-modal-dialog-1" class="bg"><i class="entypo-cog"></i></a>
                    <a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
                    <a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
                    <a href="#" data-rel="close"><i class="entypo-cancel"></i></a>
                </div>
            </div>

            <div class="panel-body">

                <form role="form" class="form-horizontal form-groups-bordered">

                    <div class="form-group">
                        <label for="area.name" class="col-sm-3 control-label">地区名称</label>
                        <div class="col-sm-5">
                            <input type="text" class="form-control" v-model="area.name" id="area.name" placeholder="地区名称">
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-offset-3 col-sm-5">
                            <button type="button" class="btn btn-default" @click="add()">提交</button>
                        </div>
                    </div>
                </form>

            </div>

        </div>

    </div>
</div>

<link rel="stylesheet" href="static/css/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet" href="static/css/rickshaw.min.css">

<!-- Bottom Scripts -->
<script src="static/js/main-gsap.js"></script>
<script src="static/js/jquery-ui-1.10.3.minimal.min.js"></script>
<script src="static/js/bootstrap.js"></script>
<script src="static/js/joinable.js"></script>
<script src="static/js/resizeable.js"></script>
<script src="static/js/neon-api.js"></script>
<script src="static/js/jquery-jvectormap-1.2.2.min.js"></script>
<script src="static/js/jquery-jvectormap-europe-merc-en.js"></script>
<script src="static/js/jquery.sparkline.min.js"></script>
<script src="static/js/d3.v3.js"></script>
<script src="static/js/rickshaw.min.js"></script>
<script src="static/js/raphael-min.js"></script>
<script src="static/js/morris.min.js"></script>
<script src="static/js/toastr.js"></script>
<script src="static/js/neon-chat.js"></script>
<script src="static/js/neon-custom.js"></script>
<script src="static/js/neon-demo.js"></script>



<script type="text/javascript" src="../axios/vue.js"></script>
<script type="text/javascript" src="../axios/axios.min.js"></script>
<script type="text/javascript" src="../axios/qs.js"></script>
<script type="text/javascript" src="../axios/getUrlParams.js"></script>
<script type="text/javascript" src="../layer/layer.js"></script>
<script type="text/javascript" src="../layui/layui.js"></script>
<script>


    var qs = Qs
    var pageNum = UrlParam.paramValues("pageNum")==null?1:UrlParam.paramValues("pageNum").toString()
    var key = UrlParam.paramValues("key")==null?"":UrlParam.paramValues("key").toString()


    var vmm=new Vue({
        el:'#app',
        data:{
            area:{
                name:"",
            },
        },
        methods: {

            add(){
                if(this.area.name==""){
                    layer.msg("地区名称不能为空",{icon:5})
                    return;
                }
                axios.post('areaAdd',qs.stringify({
                    name:this.area.name,
                })).then(response =>{
                    location.replace("arealist.html")
                }).catch(error =>{
                    console.log(error)
                })
            },
        },

    })

</script>


</body>
</html>